<template>
	<view class="page">

		<custom-navigation title="会员详情">
		</custom-navigation>

		<scroll-view class="body-scroll" scroll-y="true">
			<view class="head-container flex-row-center">
				<image class="head-img" :src="info.head_images||'/static/default_head.png'"></image>
				<view class="flex-column">
					<view class="flex-row-center">
						<view class="name"> {{info.member_name}} </view>
						<view class="vip-box">普通会员</view>
					</view>
					<view class="phone">{{encryptPhone||''}} </view>
				</view>
				<view class="edit-box flex-column-center" @click="edit()">
					<image src="../../static/edit_icon.png"></image>
					<view>编辑</view>
				</view>
			</view>
			<view class="total-box flex-row-center" style="margin-top: -60rpx;z-index: 1;position: relative;">
				<view class="item flex-column-center">
					<view class="ky">{{info.balance}}</view>
					<view class="value">可用余额</view>
				</view>
				<view class="line"></view>
				<view class="item flex-column-center">
					<view class="cx">{{info.usable_recharge_amount}}</view>
					<view class="value">储值金额</view>
				</view>
			</view>
			<view class="item-view">
				<view class="item">
					<view class="name">累计消费金额</view>
					<view class="value">{{info.consumption_amount}}</view>
				</view>
				<view class="item">
					<view class="name">赠送金额</view>
					<view class="value">{{info.usable_gift_amount}}</view>
				</view>
				<view class="item">
					<view class="name">可用积分</view>
					<view class="value">{{info.integral}}</view>
				</view>
				<view class="item">
					<view class="name">优惠券</view>
					<view class="value">{{info.available_coupon_num}}</view>
				</view>
				<view class="item">
					<view class="name">累计消费积分</view>
					<view class="value">{{info.cumul_consumption_points}}</view>
				</view>
				<view class="item">
					<view class="name">累计获取积分</view>
					<view class="value">{{info.cumul_get_points}}</view>
				</view>
			</view>
			<view class="item-view">
				<view class="item1">
					<view class="name">姓名：</view>
					<view class="vlaue">{{info.member_name}}</view>
				</view>
				<view class="item1">
					<view class="name">手机：</view>
					<view class="vlaue">{{encryptPhone||''}}</view>
				</view>
				<view class="item1">
					<view class="name">注册时间：</view>
					<view class="vlaue">{{info.create_time}}</view>
				</view>
				<view class="item1">
					<view class="name">性别：</view>
					<view class="vlaue">{{info.sex}}</view>
				</view>
				<view class="item1">
					<view class="name">地址：</view>
					<view class="vlaue">{{info.address}}</view>
				</view>
				<view class="item1">
					<view class="name">备注：</view>
					<view class="vlaue">{{info.remarks}}</view>
				</view>
				<view class="item1">
					<view class="name">账号保护：</view>
					<view class="vlaue">{{info.account_protect}}</view>
				</view>
				<view class="item1">
					<view class="name">会员等级：</view>
					<view class="vlaue">{{info.member_level}}</view>
				</view>
				<view class="item1">
					<view class="name">会员状态：</view>
					<view class="vlaue">{{info.member_state}}</view>
				</view>
				<view class="item1">
					<view class="name">会员过期时间：</view>
					<view class="vlaue">{{info.member_expiration_time}}</view>
				</view>
			</view>
		</scroll-view>
		<view class="bottom-container flex-row-center">
			<!-- <view class="item" @click="showDilaog(0)">消费记录</view> -->
			<view class="item1" @click="showDilaog(0)">积分变动</view>
			<view class="item1" @click="showDilaog(1)">余额变更</view>
			<view class="item1" @click="toSendMsg">发送短信</view>
		</view>


		<view class="dialog-contianer flex-column-center" v-if="dialogShow" style="justify-content: flex-end;"
			@click="dialogShow=false">


			<view :class="dialogShow?'showDialog':''" @tap.stop>
				<view class="title-box">
					<view class="text">{{type==0?'积分变更':'余额变更'}}</view>
					<image src="../../static/close.png" @click.stop="dialogShow=false" mode="aspectFill"></image>
				</view>

				<view class="r flex-row-center" style="margin-top: 36rpx;margin-bottom: 20rpx;">
					<view class="name">操作类型</view>
					<view class="radio flex-row-center" @click.stop="dialogActionType=0">
						<image :src="dialogActionType==0?'/static/check4.png':'/static/uncheck.png'"></image>
						充值
					</view>
					<view class="radio flex-row-center" @click.stop="dialogActionType=1">
						<image :src="dialogActionType==1?'/static/check4.png':'/static/uncheck.png'"></image>
						扣减
					</view>
				</view>

				<view class="r flex-row-center" v-if="type==0">
					<view class="name">积分<text class="x">*</text></view>
					<input placeholder="请输入积分" v-model="integral" type="digit" @input="e=> {
										e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
										  $nextTick(() => {
											integral= e.target.value
										  })
									}" />
				</view>

				<view class="r flex-row" style="margin-top: 8rpx;" v-if="type==0">
					<view class="name">备注</view>
					<textarea placeholder="请输入备注" class="input"></textarea>
				</view>


				<view class="r flex-row-center" v-if="type==1">
					<view class="name">{{dialogActionType==0?'充值':'扣减'}}储值</view>
					<input placeholder="请输入金额" v-model="recharge_amount" type="digit" @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											recharge_amount= e.target.value
										  })
									}" />
				</view>

				<view class="r flex-row-center" v-if="type==1">
					<view class="name">{{dialogActionType==0?'充值':'扣减'}}赠送金额</view>
					<input placeholder="请输入金额" v-model="gift_amount" type="digit" @input="e=> {
										e.target.value =  (e.target.value.match(/^\d*(\.?\d{0,2})/g)[0]) || null
										  $nextTick(() => {
											gift_amount= e.target.value
										  })
									}" />
				</view>

				<view class="r flex-row-center" v-if="type==1">
					<view class="name">收款方式</view>
					<view class="value">
						<picker :value="skfsIndex" :range="skfsList" @change="e=>skfsIndex = e.detail.value">
							<view v-model="amounttype">{{skfsList[skfsIndex]}}</view>
						</picker>
					</view>
					<image src="../../static/arrow-bottom2.png" class="arrow"></image>
				</view>

				<view class="r flex-row-center" v-if="type==1">
					<view class="name">备注</view>
					<input placeholder="现金" />
				</view>


				<view class="bottom-box flex-column-center" @tap.stop>
					<view class="confirm" @click="confirmEntry">确认</view>
				</view>
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type: 0, // 0 积分变动,1余额变更
				dialogShow: false,
				info: {},
				skfsIndex: 0,
				skfsList: ["现金"],
				id: 0,
				menber_no:'',
				integral: '',
				dialogActionType: 0,
				amounttype: "现金",
				recharge_amount: '',
				gift_amount: '',
			}
		},
		computed: {
			encryptPhone() {
				if (this.info?.member_phone) {
					let str = this.info.member_phone.split('')
					str.splice(3, 4, '****')
					str = str.join('')
					return str
				}
			}
		},
		onLoad(options) {
			this.id = options.id;
			this.menber_no = options.menber_no;
			this.getData();
		},
		onShow() {
			if (uni.getStorageSync("vipinfo")) {
				this.getData();
				uni.setStorageSync("vipinfo", false)
			}
		},
		methods: {
			edit() {
				uni.setStorageSync("vip-info", this.info);
				uni.navigateTo({
					url: '/pages/vip/vip-add?isEdit=true'
				})
			},
			confirmEntry() {
				if (this.type == 0) {
					if (!this.integral) {
						this.$showToast('请输入积分')
						return;
					}
					uni.showLoading({
						title: "加载中..."
					})
					this.$apiPost("/retail/operate/srvretail_points_recharge_consumption_add", [{
						"serviceName": "srvretail_points_recharge_consumption_add",
						"condition": [],
						"data": [{
							"member_no": this.info.menber_no,
							"member_name": this.info.menber_no,
							"member_phone": this.info.member_phone,
							"operation_type": this.dialogActionType == 0 ? "充值" : "扣减",
							"integral": parseFloat(this.integral || 0),
							"record_type": "手动调整",
							"channel_source": this.$SystemType
						}]
					}]).then(res => {
						uni.hideLoading()
						if (res.state == "SUCCESS") {
							this.dialogShow = false
							this.integral = '';
							this.getData();
						} else {

							uni.showToast({
								title: res.resultMessage,
								icon: 'none'
							})
						}
					})
				} else if (this.type == 1) {
					uni.showLoading({
						title: "加载中..."
					})
					this.$apiPost("/retail/operate/srvretail_recharge_adjustment_consumption_add", [{
						"serviceName": "srvretail_recharge_adjustment_consumption_add",
						"condition": [],
						"data": [{
							"member_no": this.info.menber_no,
							"member_name": this.info.member_name,
							"member_phone": this.info.member_phone,
							"operation_type": this.dialogActionType == 0 ? "充值" : "扣减",
							"payment_method": this.amounttype,
							"record_type": "手动调整",
							"usable_recharge_amount": parseFloat(this.recharge_amount),
							"usable_gift_amount": parseFloat(this.gift_amount || 0),
							"recharge_amount": parseFloat(this.recharge_amount || 0),
							"gift_amount": parseFloat(this.gift_amount || 0),
							"total_amount": parseFloat(this.recharge_amount || 0) + parseFloat(this
								.gift_amount || 0),
							"channel_source": this.$SystemType
						}]
					}]).then(res => {
						uni.hideLoading()
						if (res.state == "SUCCESS") {
							this.dialogShow = false
							this.recharge_amount = '';
							this.gift_amount = '';
							this.getData();
						} else {

							uni.showToast({
								title: res.resultMessage,
								icon: 'none'
							})
						}
					})
				}
			},
			showDilaog(type) {
				this.type = type;
				this.dialogShow = true;
			},
			toSendMsg() {
				uni.navigateTo({
					url: '/pages/vip/send-msg?mobiles=' + this.info.member_phone
				})
			},
			getData() {
				uni.showLoading({
					title: "加载中..."
				})
				let  condition_obj = 
					{
						"colName": "id",
						"ruleType": "eq",
						"value": this.id
					};
				if(this.menber_no){
					condition_obj = 
					{
						"colName": "menber_no",
						"ruleType": "eq",
						"value": this.menber_no
					};
				}

				this.$apiPost("/retail/select/srvretail_member_info_noencryption_select", {
					"serviceName": "srvretail_member_info_noencryption_select",
					"colNames": ["*"],
					"condition": [condition_obj],
					"page": {
						"pageNo": 1,
						"rownumber": 10
					}
				}).then(res => {
					uni.hideLoading()
					this.info = res.data[0]
					var token = dsBridge.call("getToken");
					if (token == '' || token == undefined) {
						token = uni.getStorageSync("token") ?? ''
					}

					if (this?.info?.head_portrait == null)
						return;

					if (this?.info?.head_portrait?.length > 20)
						this.info.head_images = this.info?.head_portrait;
					else
						this.info.head_images =
						`http://139.196.209.46:4882/file/download?fileNo=${this.info.head_portrait}&bx_auth_ticket=${token}`

				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.x {
		color: #D43030;
		font-size: 17rpx;
		margin-left: 3rpx;
	}
	.head-container {
		background: rgba(56, 192, 158, 1);
		padding: 0 24rpx;
		height: 288rpx;
		position: relative;
		padding-bottom: 60rpx;

		.head-img {
			width: 120rpx;
			height: 120rpx;
			border-radius: 60rpx;
			margin-right: 46rpx;
		}

		.name {
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(255, 255, 255, 1);
		}

		.vip-box {
			margin-left: 6rpx;
			// height: 24rpx;
			padding: 0 6rpx;
			border-radius: 40rpx;
			background: rgba(255, 255, 255, 1);
			font-size: 16rpx;
			font-weight: 500;
			color: rgba(255, 141, 26, 1);
			position: relative;
		}

		.phone {
			margin-top: 14rpx;
			font-size: 30rpx;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
		}

		.edit-box {
			position: absolute;
			top: 0;
			right: 48rpx;

			image {
				height: 30.7rpx;
				width: 32rpx;
			}

			view {
				margin-top: 8rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.total-box {
		margin-left: 24rpx;
		width: 702rpx;
		height: 90px;
		border-radius: 6px;
		z-index: 1;
		box-shadow: 0 2rpx 32rpx 2rpx rgba(0, 0, 0, 0.1);
		;
		background: rgba(255, 255, 255, 1);

		.item {
			flex: 1;

			.ky {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(212, 48, 48, 1);
			}

			.cx {
				font-size: 36rpx;
				font-weight: 700;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				font-size: 28rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
				margin-top: 4rpx;
			}

		}

		.line {
			height: 90rpx;
			width: 2rpx;
			background-color: rgba(241, 241, 241, 1);
		}
	}

	.item-view {

		width: 702rpx;
		border-radius: 12px;
		background: rgba(255, 255, 255, 1);
		box-shadow: 0 2rpx 32rpx 2rpx rgba(0, 0, 0, 0.1);
		margin-left: 24rpx;
		margin-top: 20rpx;
		padding: 0 24rpx;

		.item {
			height: 96rpx;
			border-bottom: 2rpx solid rgba(241, 241, 241, 1);
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				flex: 1;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}


		.title {
			height: 96rpx;
			border-bottom: 2rpx solid rgba(241, 241, 241, 1);
			font-size: 32rpx;
			font-weight: 700;
			color: rgba(0, 0, 0, 1);
		}

		.item1 {
			height: 96rpx;
			border-bottom: 2rpx solid rgba(241, 241, 241, 1);
			display: flex;
			flex-direction: row;
			align-items: center;

			.name {
				min-width: 224rpx;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}

			.value {
				flex: 1;
				font-size: 30rpx;
				font-weight: 500;
				color: rgba(0, 0, 0, 1);
			}
		}

	}


	.bottom-container {
		background-color: white;
		box-shadow: 0 -16rpx 16rpx 1rpx #00000008;
		height: 146rpx;
		padding: 0 24rpx;
		justify-content: space-around;

		.item {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid #333333FF;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;

		}

		.item1 {
			border-radius: 40rpx;
			line-height: 80rpx;
			text-align: center;
			border: 2rpx solid rgba(56, 192, 158, 1);
			background-color: rgba(56, 192, 158, 1);
			color: white;
			width: 192rpx;
			height: 80rpx;
			font-size: 30rpx;
			font-weight: 500;
		}

		.text {
			flex: 1;
			margin-left: 60rpx;
			font-size: 30rpx;
			font-weight: 700;

		}

		.btn {
			margin-right: 34rpx;
			width: 192rpx;
			height: 80rpx;
			border-radius: 40rpx;
			background: rgba(56, 192, 158, 1);
			font-size: 30rpx;
			font-weight: 700;
			color: white;
			text-align: center;
			line-height: 80rpx;
		}
	}


	.dialog-contianer {
		background-color: rgba(0, 0, 0, 0.2);
		width: 100%;
		height: 100%;
		position: fixed;
		z-index: 1;
	}

	.showDialog {
		animation: showDialog 0.3s ease-out;
		padding-top: 54rpx;
		width: 750rpx;
		border-radius: 40rpx 40rpx 0 0;
		background: rgba(255, 255, 255, 1);

		.title-box {
			font-size: 18px;
			font-weight: 700;
			color: rgba(51, 51, 51, 1);
			position: relative;

			.text {
				width: 100%;
				text-align: center;
			}

			image {
				width: 72rpx;
				height: 52rpx;
				position: absolute;
				right: 24rpx;
				top: 0;
			}
		}



		.r {
			padding-top: 24rpx;
			padding-left: 48rpx;
			color: rgba(0, 0, 0, 1);
			position: relative;

			.name {
				width: 174rpx;
				font-size: 32rpx;
				font-weight: 500;
			}

			.arrow {
				position: absolute;
				top: 38rpx;
				right: 56rpx;
				width: 36rpx;
				height: 36rpx;
			}

			.radio {
				width: 232rpx;
				font-size: 30rpx;
				font-weight: 500;

				image {
					margin-right: 18rpx;
					width: 40rpx;
					height: 40rpx;
				}
			}


			input {
				margin-right: 48rpx;
				flex: 1;
				height: 60rpx;
				line-height: 48rpx;
				padding: 0 24rpx;
				opacity: 1;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 500;
				background: rgba(245, 245, 247, 1);
			}


			.value {
				margin-right: 48rpx;
				flex: 1;
				height: 60rpx;
				line-height: 60rpx;
				padding: 0 24rpx;
				opacity: 1;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 500;
				background: rgba(245, 245, 247, 1);
			}


			.input {
				margin-right: 48rpx;
				flex: 1;
				height: 180rpx;
				line-height: 48rpx;
				padding: 20rpx 24rpx;
				border-radius: 8rpx;
				font-size: 28rpx;
				font-weight: 500;
				background: rgba(245, 245, 247, 1);
			}
		}

		.confirm {
			margin: 56rpx 0;
			justify-content: center;
			width: 320rpx;
			height: 80rpx;
			line-height: 80rpx;
			text-align: center;
			font-size: 36rpx;
			font-weight: 700;
			color: white;
			border-radius: 40px;
			background-color: rgba(56, 192, 158, 1);
			;
		}

	}

	// 呼吸帧
	@keyframes showDialog {
		0% {
			transform: translate(0%, 100%);
		}

		100% {
			transform: translate(0%, 0%);
		}

	}
</style>
